$bg-color-mode1: #4C4D4F !default;
$bg-color-mode2: #dcdfe6 !default;

// 除去按钮 图片点击后刷新时会出现得黑边
.el-row,.el-main,.el-aside,.el-container,svg,.el-menu {
    outline: none !important;
}

.icon-class {
    width: 1.6em;
    height: 1.6em;
}

:deep(.el-select) {
    width: 100%;
}

html.dark {
    .icon {
        fill: $bg-color-mode2
    }
}

html.hide {
    .el-aside-f {
        animation-name: hide-el-aside;
        animation-duration: .4s;
        animation-fill-mode: forwards;
        overflow: hidden;
    }

    .el-header-f {
        animation-name: hide-el-header;
        animation-duration: .4s;
        animation-fill-mode: forwards;

        .header-el-menu {
            animation-name: hide-el-header;
            animation-duration: .4s;
            animation-fill-mode: forwards;
        }

        * {
            opacity: 0;
        }
    }

    .el-main-f {
        animation-name: hide-el-main;
        animation-duration: .4s;
        animation-fill-mode: forwards;
    }

    .dialog-modal {
        animation-name: hide-dialog-modal;
        animation-duration: .4s;
        animation-fill-mode: forwards;
    }

    .main-table {
        height: calc(100vh - 45px - 2 * 60px);
    }

    .main-table-page {
        height: calc(100vh - 45px - 60px);
    }
}

.is-active:hover {
    background-color: var(--el-menu-hover-bg-color);
    color: var(--el-menu-active-color);
}

.flex-grow {
    flex-grow: 1;
}

@keyframes hide-el-aside {
    from {
        width: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2);
    }
    to {
        width: 0px;
    }
}

@keyframes hide-el-header {
    from {
        height: 59px;
    }
    to {
        height: 0px;
    }
}

@keyframes hide-el-main {
    from {
        height: calc(100vh - 59px);
    }
    to {
        height: 100vh;
    }
}

@keyframes hide-dialog-modal {
    from {
    }
    to {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
    }
}
